<template>
	<div
		:class="['destoon_ad_place', 'swiper', 'swiper-no-swiping', adTypeClass]"
		ref="swiper"
		v-on:mouseover="handleMouseOver"
		v-on:mouseout="handleMouseOut"
		v-if="isShow && adData.length > 0"
	>
		<button v-if="isClose" @click="handleCloseAd">×</button>
		<div class="swiper-wrapper">
			<div class="swiper-slide" v-for="(item, index) in adData" :key="index">
				<a :href="item.linkAddr" target="_blank" :title="item.name"><img :src="item.httpUrl" :alt="item.name" /></a>
			</div>
		</div>
	</div>
</template>

<script>
import { mapActions } from 'vuex';
import 'swiper/swiper-bundle.min.css';
import Swiper from 'swiper/swiper-bundle';
export default {
	props: ['type', 'adId'],
	data() {
		return {
			listQuery: {
				page: 1,
				limit: 999,
				status: '1'
			},
			isShow: true,
			adData: [],
			gradientSetTimeout: 1,
			effectOptArr: [
				{
					grabCursor: true,
					effect: 'creative',
					creativeEffect: {
						prev: {
							shadow: true,
							translate: [0, 0, -400]
						},
						next: {
							translate: ['100%', 0, 0]
						}
					}
				},
				{
					grabCursor: true,
					effect: 'creative',
					creativeEffect: {
						prev: {
							shadow: true,
							translate: ['-120%', 0, -500]
						},
						next: {
							shadow: true,
							translate: ['120%', 0, -500]
						}
					}
				},
				{
					grabCursor: true,
					effect: 'creative',
					creativeEffect: {
						prev: {
							shadow: true,
							translate: ['-20%', 0, -1]
						},
						next: {
							translate: ['100%', 0, 0]
						}
					}
				},
				{
					grabCursor: true,
					effect: 'creative',
					creativeEffect: {
						prev: {
							shadow: true,
							origin: 'left center',
							translate: ['-5%', 0, -200],
							rotate: [0, 100, 0]
						},
						next: {
							origin: 'right center',
							translate: ['5%', 0, -200],
							rotate: [0, -100, 0]
						}
					}
				}
			]
		};
	},
	computed: {
		adTypeClass() {
			switch (this.type) {
				case 'banner':
					return 'banner_ad_show';
					break;
				case 'floatRightBttom':
					return 'float_right_bottom';
					break;
				case 'AntitheticalCouplet':
					return 'AntitheticalCouplet';
					break;
				case 'AntitheticalCouplet2':
					return 'AntitheticalCouplet2';
					break;
				case 'gradient':
					return 'gradient';
					break;
			}
		},
		isClose() {
			return this.type !== 'banner';
		}
	},
	watch: {
		adData(arr) {
			if (this.type == 'gradient' && arr.length >= 1) {
				this.transitions(1);
			}
			let index = parseInt(Math.random() * this.effectOptArr.length);
			if (arr.length === 1) return false;
			this.$nextTick(() => {
				if (!this.isClose) {
					new Swiper(this.$refs['swiper'], { autoplay: true, loop: true, direction: 'vertical' });
				} else {
					new Swiper(this.$refs['swiper'], { autoplay: true, loop: true, ...this.effectOptArr[index] });
				}
			});
		}
	},
	mounted() {
		this.getImageData({ columnId: this.adId, ...this.listQuery, status: '1' }).then((res) => {
			if (res.code === '0') {
				console.log();
				this.adData = !res.data ? [] : [...res.data.filter((item) => item.status === '1')];
			}
		});
	},
	methods: {
		...mapActions(['getImageData']),

		//关闭广告
		handleCloseAd() {
			this.isShow = false;
			window.clearTimeout(this.setInterval);
		},
		transitions(type) {
			var right = 95,
				top = 95,
				transitionDuration = 1000,
				gradients;
			if (type != 1) {
				gradients = document.getElementById('gradient');
				const num = Math.random() * 100;
				const num2 = Math.random() * 100;
				right = num + '%';
				top = num2 + '%';
				transitionDuration = (parseInt(num - parseInt(gradients.style.right)) / 10) * 1000;
				// console.log(transitionDuration)
				if (transitionDuration < 0) {
					transitionDuration = -transitionDuration;
				}
			}
			var _this = this;
			window.clearTimeout(this.setInterval);
			this.setInterval = window.setTimeout(function () {
				if (gradients == undefined) {
					gradients = document.getElementById('gradient');
				}
				if (gradients == undefined) {
					window.clearTimeout(this.setInterval);
				}
				gradients.style.right = right;
				gradients.style.top = top;

				gradients.style.transitionDuration = transitionDuration;
				_this.transitions();
			}, transitionDuration);
		},
		handleMouseOver() {
			if (this.type == 'gradient') {
				window.clearTimeout(this.setInterval);
				var gradients = document.getElementById('gradient');
				var app = document.getElementById('app');
				gradients.style.right = ((app.clientWidth - gradients.offsetLeft - gradients.clientHeight) / app.clientWidth) * 100 + '%';
				gradients.style.top = (gradients.offsetTop / app.clientHeight) * 100 + '%';
				gradients.style.transitionDuration = 0;
				// console.log(gradients.style.right+":"+gradients.style.top)
			}
		},
		handleMouseOut() {
			if (this.type == 'gradient') {
				this.transitions();
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.destoon_ad_place {
	background-color: #f2f6fc;
	a,
	img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}

.banner_ad_show {
	width: 100%;
	height: 110px;
	margin-bottom: 40px;
}

.AntitheticalCouplet img,
.AntitheticalCouplet2 img {
	width: 100%;
}

.float_right_bottom,
.AntitheticalCouplet,
.AntitheticalCouplet2,
.gradient {
	position: fixed;
	width: 240px;
	height: 128px;
	right: 10px;
	bottom: 0;
	z-index: 9;

	button {
		position: absolute;
		top: 0;
		right: 0;
		z-index: 2;
		outline: none;
		border: none;
		background: transparent;
		font-size: 16px;
		font-family: '宋体';
		padding: 5px;
		font-weight: bold;
		cursor: pointer;
	}

	a,
	img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}

.AntitheticalCouplet {
	height: 240px;
	width: 128px;
	position: fixed;
	top: 50%;
	right: auto;
	margin-top: -120px;
	left: 0px;
	z-index: 10000;
}

.AntitheticalCouplet2 {
	position: fixed;
	height: 240px;
	width: 128px;
	top: 50%;
	margin-top: -120px;
	right: 0px;
	z-index: 10000;
}

.gradient {
	position: fixed;
	height: 128px;
	width: 128px;
	top: 0px;
	right: 0px;
	z-index: 10000;
	transition: all 5s linear;
}
</style>
